<template>
  <div class="dashboard-screen">
    <div class="header-title">数据统计大屏</div>
    <el-row :gutter="24" class="card-row" justify="center">
      <el-col :span="6" v-for="item in statCards" :key="item.key">
        <div class="stat-card" :class="item.color">
          <div class="label">{{ item.title }}</div>
          <div class="number">{{ formattedValue(item.key) }}</div>
        </div>
      </el-col>
    </el-row>
    <el-loading v-if="loading" text="加载中..." />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import request from "@/utils/request";

const stats = ref({
  today_used: 0,
  yesterday_used: 0,
  month_used: 0,
  total_used: 0,
  today_new_users: 0,
  month_new_users: 0,
});

const statCards = [
  { key: "today_used", title: "今日售出卡密", color: "green" },
  { key: "yesterday_used", title: "昨日售出卡密", color: "green" },
  { key: "month_used", title: "本月售出卡密", color: "green" },
  { key: "total_used", title: "累计售出卡密", color: "green" },
  { key: "today_new_users", title: "今日新增用户", color: "blue" },
  { key: "month_new_users", title: "本月新增用户", color: "blue" },
];

const loading = ref(false);

const fetchTodayStats = async () => {
  loading.value = true;
  try {
    // 加入租户ID
    const tenantId = localStorage.getItem("tenant_id") || "1";

    const res = await request.get("admin/mp/dashboard/today-stats", {
      params: {
        tenant_id: tenantId,
      },
    });
    if (res.code === 0 && res.data?.code_stats) {
      stats.value = res.data.code_stats;
    } else {
      ElMessage.error(res.msg || "数据加载失败");
    }
  } catch (err) {
    ElMessage.error("请求失败，请稍后重试");
    console.error(err);
  } finally {
    loading.value = false;
  }
};

// 格式化数字，带千分符
const formattedValue = (key) => {
  const val = stats.value[key] || 0;
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

onMounted(() => {
  fetchTodayStats();
});
</script>

<style scoped lang="scss">
.dashboard-screen {
  background: linear-gradient(135deg, #0c112f 0%, #080c1c 100%);
  min-height: 100vh;
  padding: 60px 80px;
  color: #ffffff;
  font-family: "Orbitron", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.header-title {
  text-align: center;
  font-size: 52px;
  font-weight: 600;
  color: #00e4ff;
  text-shadow: 0 0 18px rgba(0, 228, 255, 0.3);
  margin-bottom: 60px;
  letter-spacing: 8px;
}

.card-row {
  flex-wrap: wrap;
}

.stat-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0)
  );
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 228, 255, 0.15);
  box-shadow: 0 0 12px rgba(0, 228, 255, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 36px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &:hover {
    box-shadow: 0 0 20px rgba(0, 228, 255, 0.2);
  }

  .label {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 12px;
    color: #c8dcf0;
    letter-spacing: 1px;
  }

  .number {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 4px;
    user-select: text; /* 可复制 */
  }

  &.green .number {
    color: #28ffb2;
    text-shadow: 0 0 12px rgba(40, 255, 178, 0.4);
  }

  &.blue .number {
    color: #00e4ff;
    text-shadow: 0 0 12px rgba(0, 228, 255, 0.4);
  }
}
</style>
